home *** CD-ROM | disk | FTP | other *** search
/ PC World 2008 February (DVD) / PCWorld_2008-02_DVD.iso / v cisle / PHP / PHP.exe / EasyPHP-2.0b1-setup.exe / {app} / sqlitemanager / jscalendar / index.html < prev    next >
Encoding:
Extensible Markup Language  |  2006-04-18  |  12.4 KB  |  331 lines
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <!-- $Id: index.html,v 1.15 2005/03/05 14:38:10 mishoo Exp $ -->
  5.  
  6. <head>
  7. <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
  8. <title>The Coolest DHTML Calendar - Online Demo</title>
  9. <link rel="stylesheet" type="text/css" media="all" href="skins/aqua/theme.css" title="Aqua" />
  10. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-blue.css" title="winter" />
  11. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-blue2.css" title="blue" />
  12. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-brown.css" title="summer" />
  13. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-green.css" title="green" />
  14. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-1.css" title="win2k-1" />
  15. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-2.css" title="win2k-2" />
  16. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
  17. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-cold-2.css" title="win2k-cold-2" />
  18. <link rel="alternate stylesheet" type="text/css" media="all" href="calendar-system.css" title="system" />
  19.  
  20. <!-- import the calendar script -->
  21. <script type="text/javascript" src="calendar.js"></script>
  22.  
  23. <!-- import the language module -->
  24. <script type="text/javascript" src="lang/calendar-en.js"></script>
  25.  
  26. <!-- other languages might be available in the lang directory; please check
  27. your distribution archive. -->
  28.  
  29. <!-- helper script that uses the calendar -->
  30. <script type="text/javascript">
  31.  
  32. var oldLink = null;
  33. // code to change the active stylesheet
  34. function setActiveStyleSheet(link, title) {
  35.   var i, a, main;
  36.   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  37.     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
  38.       a.disabled = true;
  39.       if(a.getAttribute("title") == title) a.disabled = false;
  40.     }
  41.   }
  42.   if (oldLink) oldLink.style.fontWeight = 'normal';
  43.   oldLink = link;
  44.   link.style.fontWeight = 'bold';
  45.   return false;
  46. }
  47.  
  48. // This function gets called when the end-user clicks on some date.
  49. function selected(cal, date) {
  50.   cal.sel.value = date; // just update the date in the input field.
  51.   if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))
  52.     // if we add this call we close the calendar on single-click.
  53.     // just to exemplify both cases, we are using this only for the 1st
  54.     // and the 3rd field, while 2nd and 4th will still require double-click.
  55.     cal.callCloseHandler();
  56. }
  57.  
  58. // And this gets called when the end-user clicks on the _selected_ date,
  59. // or clicks on the "Close" button.  It just hides the calendar without
  60. // destroying it.
  61. function closeHandler(cal) {
  62.   cal.hide();                        // hide the calendar
  63. //  cal.destroy();
  64.   _dynarch_popupCalendar = null;
  65. }
  66.  
  67. // This function shows the calendar under the element having the given id.
  68. // It takes care of catching "mousedown" signals on document and hiding the
  69. // calendar if the click was outside.
  70. function showCalendar(id, format, showsTime, showsOtherMonths) {
  71.   var el = document.getElementById(id);
  72.   if (_dynarch_popupCalendar != null) {
  73.     // we already have some calendar created
  74.     _dynarch_popupCalendar.hide();                 // so we hide it first.
  75.   } else {
  76.     // first-time call, create the calendar.
  77.     var cal = new Calendar(1, null, selected, closeHandler);
  78.     // uncomment the following line to hide the week numbers
  79.     // cal.weekNumbers = false;
  80.     if (typeof showsTime == "string") {
  81.       cal.showsTime = true;
  82.       cal.time24 = (showsTime == "24");
  83.     }
  84.     if (showsOtherMonths) {
  85.       cal.showsOtherMonths = true;
  86.     }
  87.     _dynarch_popupCalendar = cal;                  // remember it in the global var
  88.     cal.setRange(1900, 2070);        // min/max year allowed.
  89.     cal.create();
  90.   }
  91.   _dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
  92.   _dynarch_popupCalendar.parseDate(el.value);      // try to parse the text in field
  93.   _dynarch_popupCalendar.sel = el;                 // inform it what input field we use
  94.  
  95.   // the reference element that we pass to showAtElement is the button that
  96.   // triggers the calendar.  In this example we align the calendar bottom-right
  97.   // to the button.
  98.   _dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar
  99.  
  100.   return false;
  101. }
  102.  
  103. var MINUTE = 60 * 1000;
  104. var HOUR = 60 * MINUTE;
  105. var DAY = 24 * HOUR;
  106. var WEEK = 7 * DAY;
  107.  
  108. // If this handler returns true then the "date" given as
  109. // parameter will be disabled.  In this example we enable
  110. // only days within a range of 10 days from the current
  111. // date.
  112. // You can use the functions date.getFullYear() -- returns the year
  113. // as 4 digit number, date.getMonth() -- returns the month as 0..11,
  114. // and date.getDate() -- returns the date of the month as 1..31, to
  115. // make heavy calculations here.  However, beware that this function
  116. // should be very fast, as it is called for each day in a month when
  117. // the calendar is (re)constructed.
  118. function isDisabled(date) {
  119.   var today = new Date();
  120.   return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
  121. }
  122.  
  123. function flatSelected(cal, date) {
  124.   var el = document.getElementById("preview");
  125.   el.innerHTML = date;
  126. }
  127.  
  128. function showFlatCalendar() {
  129.   var parent = document.getElementById("display");
  130.  
  131.   // construct a calendar giving only the "selected" handler.
  132.   var cal = new Calendar(0, null, flatSelected);
  133.  
  134.   // hide week numbers
  135.   cal.weekNumbers = false;
  136.  
  137.   // We want some dates to be disabled; see function isDisabled above
  138.   cal.setDisabledHandler(isDisabled);
  139.   cal.setDateFormat("%A, %B %e");
  140.  
  141.   // this call must be the last as it might use data initialized above; if
  142.   // we specify a parent, as opposite to the "showCalendar" function above,
  143.   // then we create a flat calendar -- not popup.  Hidden, though, but...
  144.   cal.create(parent);
  145.  
  146.   // ... we can show it here.
  147.   cal.show();
  148. }
  149. </script>
  150.  
  151. <style type="text/css">
  152. .ex { font-weight: bold; background: #fed; color: #080 }
  153. .help { color: #080; font-style: italic; }
  154. body { background: #fea; font: 10pt tahoma,verdana,sans-serif; }
  155. table { font: 13px verdana,tahoma,sans-serif; }
  156. a { color: #00f; }
  157. a:visited { color: #00f; }
  158. a:hover { color: #f00; background: #fefaf0; }
  159. a:active { color: #08f; }
  160. .key { border: 1px solid #000; background: #fff; color: #008;
  161. padding: 0px 5px; cursor: default; font-size: 80%; }
  162. </style>
  163.  
  164. </head>
  165. <body onload="showFlatCalendar()">
  166.  
  167. <h2><a href="http://www.dynarch.com/projects/calendar/"
  168. title="Visit the project website">jscalendar</a>-1.0
  169. "It is happening again"</h2>
  170.  
  171. <p>
  172. <div style="float: right; border: 1px solid #b87; padding: 2px; font-size: 90%; background: #ffb;">
  173. Theme:<br />
  174. <a href="#" id="defaultTheme" onclick="return setActiveStyleSheet(this, 'Aqua');">Aqua</a>
  175. |
  176. <a href="#" onclick="return setActiveStyleSheet(this, 'winter');">winter</a>
  177. |
  178. <a href="#" onclick="return setActiveStyleSheet(this, 'blue');">blue</a>
  179. |
  180. <a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a>
  181. |
  182. <a href="#" onclick="return setActiveStyleSheet(this, 'green');">green</a>
  183. <br />
  184. <a href="#" onclick="return setActiveStyleSheet(this, 'win2k-1');">win2k-1</a>
  185. |
  186. <a href="#" onclick="return setActiveStyleSheet(this, 'win2k-2');">win2k-2</a>
  187. |
  188. <a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-1');">win2k-cold-1</a>
  189. |
  190. <a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-2');">win2k-cold-2</a>
  191. <br />
  192. <a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a>
  193. <script type="text/javascript">
  194. setActiveStyleSheet(document.getElementById("defaultTheme"), "Aqua");
  195. </script>
  196. </div>
  197. <a href="release-notes.html">Release notes</a>.
  198. <br />
  199. Set it up in minutes:
  200.   <a href="simple-1.html">popup calendar</a>,
  201.   <a href="simple-2.html">flat calendar</a>.
  202. Other samples:
  203.   <a href="simple-3.html">special days</a>,
  204.   <a href="dayinfo.html">day info</a>,
  205.   <a href="multiple-dates.html">multiple dates selection</a>
  206. <br />
  207. Documentation:
  208.   <a href="doc/html/reference.html">HTML</a>,
  209.   <a href="doc/reference.pdf">PDF</a>.
  210. <br />
  211. </p>
  212.  
  213. <div style="padding-left:20px; font-size: 90%; font-style: italic;">
  214.  
  215. </div>
  216.  
  217. <table style="width: 100%">
  218. <tr valign="top">
  219. <td style="background: #ffa; padding: 5px; border: 1px solid #995;">
  220.  
  221. <form action="#">
  222. <div style="background: #995; color: #ffa; font-weight: bold; padding: 2px;">
  223. Popup examples
  224. </div>
  225.  
  226. <br />
  227.  
  228. <b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30"
  229. ><input type="reset" value=" ... "
  230. onclick="return showCalendar('sel1', '%Y-%m-%d [%W] %H:%M', '24', true);"> %Y-%m-%d [%W] %H:%M -- single
  231. click<br />
  232.  
  233. <b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30"
  234. ><input type="reset" value=" ... "
  235. onclick="return showCalendar('sel2', '%a, %b %e, %Y [%I:%M %p]', '12');"> %a, %b %e, %Y [%I:%M %p]
  236. -- double click
  237.  
  238. <br /><br />
  239. <!--
  240. if you remove this comment and leave the following HTML code
  241. you will see a horrible effect, in all supported browsers (IE and Mozilla).
  242. -->
  243. <SELECT multiple size="4" name="component-select">
  244.   <OPTION selected value="Component_1_a">Component_1</OPTION>
  245.   <OPTION selected value="Component_1_b">Component_2</OPTION>
  246.   <OPTION>Component_3</OPTION>
  247.   <OPTION>Component_4</OPTION>
  248.   <OPTION>Component_5</OPTION>
  249.   <OPTION>Component_6</OPTION>
  250.   <OPTION>Component_7</OPTION>
  251. </SELECT>
  252. this select should hide when the calendar is above it.
  253. <br /><br />
  254.  
  255. <b>Date #3:</b> <input type="text" name="date3" id="sel3" size="30"
  256. ><input type="reset" value=" ... "
  257. onclick="return showCalendar('sel3', '%d/%m/%Y');"> %d/%m/%Y
  258. -- single click
  259. <br />
  260.  
  261. <b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30"
  262. ><input type="reset" value=" ... "
  263. onclick="return showCalendar('sel4', '%A, %B %e, %Y');"> %A, %B %e, %Y --
  264. double click
  265.  
  266. </form>
  267.  
  268. <p>This is release <b>1.0</b>.  Works on MSIE/Win 5.0 or better (really),
  269. Opera 7+, Mozilla, Firefox, Netscape 6.x, 7.0 and all other Gecko-s,
  270. Konqueror and Safari.</p>
  271.  
  272. <h4>Keyboard navigation</h4>
  273.  
  274. <p>Starting with version 0.9.2, you can also use the keyboard to select
  275. dates (only for popup calendars; does <em>not</em> work with Opera
  276. 7 or Konqueror/Safari).  The following keys are available:</p>
  277.  
  278. <ul>
  279.  
  280.   <li><span class="key">←</span> , <span class="key">→</span> ,
  281.   <span class="key">↑</span> , <span class="key">↓</span> -- select date</li>
  282.   <li><span class="key">CTRL</span> + <span class="key">←</span> ,
  283.   <span class="key">→</span> -- select month</li>
  284.   <li><span class="key">CTRL</span> + <span class="key">↑</span> ,
  285.   <span class="key">↓</span> -- select year</li>
  286.   <li><span class="key">SPACE</span> -- go to <em>today</em> date</li>
  287.   <li><span class="key">ENTER</span> -- accept the currently selected date</li>
  288.   <li><span class="key">ESC</span> -- cancel selection</li>
  289.  
  290. </ul>
  291.  
  292.           </td>
  293.  
  294.           <td style="padding: 5px; margin: 5px; border: 1px solid #984; background: #ed9; width: 19em;">
  295.  
  296.             <div style="background: #984; color: #fea; font-weight: bold; padding: 2px; text-align: center">
  297.               Flat calendar
  298.             </div>
  299.  
  300.             <p style="width: 12em"><small>A non-popup version will appear below as soon
  301.               as the page is loaded.  Note that it doesn't show the week number.</small></p>
  302.  
  303.             <!-- the calendar will be inserted here -->
  304.             <div id="display" style="float: right; clear: both;"></div>
  305.             <div id="preview" style="font-size: 80%; text-align: center; padding: 2px"> </div>
  306.  
  307.             <p style="clear: both;"><small>
  308.               The example above uses the <code>setDisabledHandler()</code> member function
  309.               to setup a handler that would only enable days withing a range of 10 days,
  310.               forward or backward, from the current date.
  311.             </small></p>
  312.  
  313.           </div>
  314.  
  315.           </td>
  316.  
  317.         </tr>
  318.       </table>
  319.  
  320. <hr /><address>
  321. © <a href="http://www.dynarch.com/">dynarch.com</a> 2002-2005 <br />
  322. Author: <a href="http://www.bazon.net/mishoo/">Mihai
  323. Bazon</a><br /> Distributed under the <a
  324. href="http://www.gnu.org/licenses/lgpl.html">GNU LGPL</a>.</address>
  325.  
  326. <p style="font-size: smaller">If you use this script on a public page we
  327. would love it if you would <a href="http://www.dynarch.com/contact.html">let us
  328. know</a>.</p>
  329.  
  330. </body></html>
  331.